<%@ include file="/WEB-INF/jsps/common/taglibs.jsp" %>

<html>
<head>
<title>Insert title here</title>
</head>
<body>
	<%-- ${genders}
	${sessionScope.genders} --%>
	${contactListForm.contactList}

	<!-- Header -->
	<jsp:include page="/WEB-INF/tags/header.jsp" />
	
	
	<!-- Contact list -->
	<div style="font-size: 40px;" align="center">THE TABLE OF CONTACTS</div>
	<table align="center" style="background-color: appworkspace; width: 100%">
		<tr style="background-color: silver;">
			<td>ID</td>
			<td>First Name</td>
			<td>Last Name</td>
			<td>Email</td>
			<td>Telephone</td>
			<td>Action</td>
		</tr>
		<c:forEach var="contact" items="${contactListForm.contactList}">
			<tr>
				<td>${contact.id}</td>
				<td>${contact.firstName}</td>
				<td>${contact.lastName}</td>
				<td>${contact.email}</td>
				<td>${contact.telephone}</td>
				<td><a href="javascript:deleteContact(${contact.id})">Delete</a></td>
			</tr>
		</c:forEach>
	</table>
	
	
	<!-- Contact actions -->
	<table width="100%" title="Actions" style="margin: 20 0 20 0">
		<tr>
			<td style="font-size: 20px; font-weight: bold;">Search contact</td>
			<td style="font-size: 20px; font-weight: bold;">Add contact</td>
		</tr>
		<tr>
			<td  style="vertical-align: top;background-color: activecaption;">
				<form action="search" method="get">
					<table>
						<tr>
							<td>First name:</td>
							<td><input type="text" name="keyword" value="${contactListForm.keyword}"/> </td>
						</tr>
					</table>
				</form>
			</td>
			<td style="background-color: activeborder;">
				<form:form action="add" method="post" modelAttribute="contactListForm">
					<table>
						<tr>
							<td>ID:</td>
							<td><form:input type="text" path="contact.id" id="contactId"/></td>
						</tr>
						<tr>
							<td>First name:</td>
							<td><form:input type="text" path="contact.firstName"/></td>
						</tr>
						<tr>
							<td>Last name:</td>
							<td><form:input type="text" path="contact.lastName"/></td>
						</tr>
						<tr>
							<td>Email:</td>
							<td><form:input type="text" path="contact.email"/></td>
						</tr>
						<tr>
							<td>Telephone:</td>
							<td><form:input type="text" path="contact.telephone"/></td>
						</tr>
						<tr>
							<td></td>
							<td align="right"><input type="submit" value="Submit"/></td>
						</tr>
					</table>
				</form:form>
			</td>
		</tr>
	</table>
	
	
	<!-- Footer -->
	<jsp:include page="/WEB-INF/tags/footer.jsp"></jsp:include>
	
	<!-- Javascript -->
	<script src="http://code.jquery.com/jquery-1.9.1.js" ></script>
	<script>
		$(document).ready(function() {
		    $("#contactId").keydown(function(event) {
		        // Allow: backspace, delete, tab, escape, and enter
		        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
		             // Allow: Ctrl+A
		            (event.keyCode == 65 && event.ctrlKey === true) || 
		             // Allow: home, end, left, right
		            (event.keyCode >= 35 && event.keyCode <= 39)) {
		                 // let it happen, don't do anything
		                 return;
		        }
		        else {
		            // Ensure that it is a number and stop the keypress
		            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
		                event.preventDefault(); 
		            }   
		        }
		    });
		});
		
		function deleteContact(contactId){
			
			$.ajax({
			    url: '/contact-list/delete/' + contactId,
			    type: 'DELETE',
			    success: function(result) {
			    	location.reload();
			    },
			    error   : function(jqXHR, textStatus, errorThrown) {
			        alert(jqXHR.status + ' ' + jqXHR.responseText);
			    }
			});
		}
	</script>
</body>
</html>